<template>
	<div class="index">
		<div class="header">
			<navigator url="/pages/city/main" class="city">{{city}}</navigator>
			<div class=""></div>
		</div>
		<div class="list">
			<li v-for="item in movieList" :key="item" @click="goMovie(item.id)">
				<div class="left">
					<img :src='item.img' />
				</div>
				<div class="content">
					<p class="name"><span>{{item.nm}}</span></p>
					<p class="mt cat">{{item.cat}}</p>
					<p class="mt">{{item.scm}}</p>
					<p class="mt">{{item.showInfo}}</p>
				</div>
				<div class="right">
					<p class="sc" v-if='item.preSale !== 1'><span v-if='item.sc!==0'>{{item.sc}}分</span><span v-else style="color: #A69892;">暂无评分</span></p>
					<p class="sc" style="font-size: 24rpx;" v-else>{{item.wish}}想看</p>
					<p class="btn" v-if='item.preSale !== 1' @click.stop="buy()">购买</p>
					<p class="btn" style="background: #007FEF;" v-else @click.stop="buy()">预售</p>
				</div>
			</li>
		</div>
		<div class="tip" v-show="tipShow">{{tip}}</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				movieList: [],
				offset: 0,
				limit: 10,
				tip: '',
				tipShow: false,
				city: ''
			}
		},
		onLoad: function(options) {
			var city = options.city;
			console.log(city)
			this.getList();
			if(city == undefined) {
				this.getLocation();
			} else {
				this.city = city;
			}

			wx.setNavigationBarTitle({
				title: "六五影院"
			})
		},

		//上拉刷新
		onReachBottom: function() {

			this.offset += 10;
			this.getList();
		},
		mounted: function() {

		},
		methods: {
			getLocation: function() {
				var that = this;
				wx.getLocation({
					type: 'wgs84',
					success: function(res) {
						var latitude = res.latitude;
						var longitude = res.longitude;
						that.loadCity(latitude, longitude)
					}
				})
			},
			loadCity: function(latitude, longitude) {
				var that = this;
				wx.request({
					url: "https://api.map.baidu.com/geocoder/v2/?ak=FbOVDGKujpeGYyTNc9nFoONSCadKu0CH&location=" + latitude + "," + longitude + "&output=json",
					success: function(res) {
						that.city = res.data.result.addressComponent.city;
					}

				})
			},
			getList: function() {
				var that = this;
				wx.request({
					url: "https://m.maoyan.com/movie/list.json",
					data: {
						type: 'hot',
						offset: that.offset,
						limit: that.limit
					},
					success: function(res) {
						if(res.data.data.movies.length > 0) {
							if(that.offset === 0) {
								that.movieList = res.data.data.movies;
							} else {
								wx.showLoading({
									title: '玩命加载中',
								})
								that.movieList = that.movieList.concat(res.data.data.movies);
								wx.hideLoading();
							}
						} else {
							console.log(111111)
							that.offset = that.movieList.length;
							wx.showLoading({
								title: '没有数据啦',
							})
							setTimeout(function() {
								wx.hideLoading();
							}, 1000)
						}
						
					}

				})

			},
			goMovie: function(id) {
				wx.navigateTo({
					url: '/pages/detail/main?id=' + id
				});
			},
			buy: function() {
				var that = this;
				that.tipShow = true;
				that.tip = "购买功能还没实现，敬请期待！"
				setTimeout(function() {
					that.tipShow = false;
				}, 1000);

			}
		}
	}
</script>
<style>
	.index {
		font-family: "微软雅黑";
		font-size: 0.3rem;
	}
	
	.header {
		padding: 0.3rem 0.2rem;
		font-size: 26rpx;
		border-bottom: 2rpx solid #A69892;
	}
	
	.list {
		padding: 0 0.2rem;
	}
	
	.list li {
		display: flex;
		padding: 0.3rem 0;
		border-bottom: 2rpx solid #A69892;
	}
	
	.list li .right {
		flex: 1;
	}
	
	.list li .left {
		height: 169rpx;
		flex: 1;
	}
	
	.list li .left img {
		width: 100%;
		height: 100%;
	}
	
	.list li .content {
		flex: 3;
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #666;
		max-height: 90rpx;
		line-height: 1.4;
	}
	
	.name span {
		font-size: 30rpx;
		display: inline-block;
		color: #000;
	}
	
	.name span.type {
		margin-left: 10rpx;
		background: royalblue;
		padding: 5rpx;
	}
	
	.mt {
		margin-top: 5rpx;
	}
	
	.list li .right {
		text-align: right;
	}
	
	.sc {
		color: #FFBF4C;
		font-size: 34rpx;
	}
	
	.btn {
		margin-top: 60rpx;
		text-align: center;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		background: #E64340;
		color: #fff;
	}
	
	.tip {
		position: fixed;
		top: 40%;
		left: 35%;
		width: 200rpx;
		background: #333;
		color: #FFFFFF;
		font-size: 28rpx;
		padding: 20rpx;
	}
</style>